<template>
  <div style="z-index: 999;margin-left: -20px;height: 50px;">
    <a-row style="min-height: 0.9rem; font-size: 0.4rem; margin-bottom: 15px;width: 250px;margin-left: 20px;">
      <a-col :span="0">
        <a-icon type="search"></a-icon>
      </a-col>
      <a-col :span="24">
        <a-input-search placeholder="搜索" enter-button v-model:value="searchName" @search="onSearch" />
      </a-col>
    </a-row>
  </div>
  <a-table bordered :columns="columns" :data-source="data" :pagination="false" size="default" :scroll="{ x: 1000 }"
    :row-key="record => record.id" tableLayout="auto">
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'action'">
        <span style="color: #1890ff;margin-left: 15px;cursor: pointer;" @click="handleCheck(record.key)">查看</span>
      </template>
    </template>
  </a-table>
  <a-modal v-model:visible="showModal" title="数据详情" okText="编辑" :cancelText="[]" @ok="handleEdit()" style="width: 45%;"
    :maskClosable="false">
    <div style="height: 500px;overflow-y: auto;padding:0 50px;">
      <a-descriptions layout="vertical" bordered>
        <a-descriptions-item>
          <div v-for="item in checkData" class="showModelData_item">{{ item.label }}</div>
        </a-descriptions-item>
        <a-descriptions-item>
          <div v-for="item in checkDataVal" class="showModelData_item">{{ item ? item : '无' }}</div>
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </a-modal>
  <edit ref="refEdit" :type="type" :typeId="typeId" @get_data="get_data" @handleCheck="handleCheck"></edit>
  <div style="z-index: 99;position: absolute;bottom: 25px;right: 25px;">
    <a-pagination v-model:current="current" @change="handlePagination" :total="pageTotal" :hideOnSinglePage="true"
      style="margin-top: 50px;float: right;" />
    <span v-if="pageTotal > 10"
      style="float: right;margin-top: 50px;font-size: 16px;line-height: 32px;margin-right: 10px;color: rgb(65, 65, 65);">共{{
        pageTotal }}条数据</span>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { getDataList, getData, dataEdit } from '@api/data.js'
import { message } from "ant-design-vue";
import dataList from "@views/datas/datas.js";
import { useRouter, useRoute } from "vue-router";
import edit from "@views/datas/edit.vue";
const router = useRouter()
const columns = ref([])
const props = defineProps(['type'])
const type = ref(router.currentRoute.value.query.id || props.type)
const data = ref([])
const searchName = ref('')
const current = ref(1)
const pagesize = ref(10)
const pageTotal = ref()
const key = ref('')
const refEdit = ref(null)
// const disabled = ref(true)

function updateQueryStringParameter(uri, key, value) {
  if (!value) { return uri }
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  }
  else {
    return uri + separator + key + "=" + value;
  }
}
watch(props, () => {
  dataList.forEach(v => {
    if (v.name === props.type) {
      type.value = v.en
    }
  })
  data.value = []
  current.value = 1
  let newurl = updateQueryStringParameter(window.location.href, 'id', type.value,);
  window.history.replaceState({
    path: newurl
  }, '', newurl);
  init()
})


function handlePagination(page, pageSize) {
  current.value = page
  pagesize.value = pageSize
  get_data()
}
function onSearch() {
  init()
}


function init() {

  getDataList(type.value, 'OPTIONS', {}).then(res => {
    const head = res.data.fields
    let _columns = []
    for (var key in res.data.fields) {
      if (key !== 'id') {
        _columns.push({ title: head[key].label, dataIndex: key, align: 'center', width: '150px', ellipsis: true })
      }
    }
    _columns.unshift({ title: '序号', dataIndex: 'index', align: 'center', fixed: 'left', ellipsis: true })
    _columns.push({ title: '操作', dataIndex: 'action', align: 'center', fixed: 'right', ellipsis: true })

    columns.value = _columns

    get_data()


  }).catch(err => {
  })

}

function get_data() {
  getDataList(type.value, 'GET', { page: current.value, limit: pagesize.value, search: searchName.value }).then((res, i) => {
    pageTotal.value = res.data.count
    data.value = res.data.results
    data.value.forEach((v, i) => {
      v.index = (current.value - 1) * 10 + i + 1,
        v.key = v.id
    })
  })
}


onMounted(() => {
  init()
})

const showModal = ref(false);
const editShowModal = ref(false)
const modelList = ref([])
const checkData = ref([])
const checkDataVal = ref([])
const dataval = ref([])
const datakey = ref([])
const _id = ref()
const typeId = ref()

// 查看
function handleCheck(id) {
  typeId.value = id
  showModal.value = true
  getData(type.value, 'OPTIONS', id).then(res => {
    checkData.value = res.data.fields
  }).catch(err => {
    message.error('获取失败')
  })
  getData(type.value, 'GET', id).then(res => {
    checkDataVal.value = res.data
  }).catch(err => {
    message.error('数据异常')
  })
}



function handleOk() {
  for (let key in dataval.value) {
    if (dataval.value[key] === '') {
      dataval.value[key] = null
    }
  }
  dataEdit(type.value, _id.value, dataval.value).then(res => {
    message.success('修改成功')
    get_data()
    editShowModal.value = false
    handleCheck(typeId.value)
  }).catch(err => {
    message.error('修改失败')
  })
}


const datatype = ref([])
async function handleEdit() {
  // disabled.value = true
  refEdit.value.editShowModal = true
  refEdit.value.datatype = []
  refEdit.value.handleEdit()
}
</script>

<style lang="less" scoped>
::v-deep .ant-spin-nested-loading {
  position: absolute;
  left: 20px;
  right: 20px;
}

.action_btn {
  margin-right: 15px;

}

.action_group {
  display: flex;
  right: 30px;
}


.showModelData_item {
  width: 100%;
  text-align: center;
  padding: 5px;
}

.showModelData_item:nth-child(odd) {
  background-color: rgb(240, 240, 240);
}


::v-deep .ant-descriptions-item-content {
  padding: 0 !important;
}

#components-table-demo-summary tfoot th,
#components-table-demo-summary tfoot td {
  background: #fafafa;
}

[data-theme='dark'] #components-table-demo-summary tfoot th,
[data-theme='dark'] #components-table-demo-summary tfoot td {
  background: #1d1d1d;
}

::v-deep .ant-table {
  height: calc(100vh - 250px);
  overflow: auto;
}
</style>
